<template>
  <div>
    <h2>我是用户页</h2>
    <p>用户id：{{ userId }}</p>
    <p>用户id：{{ $route.params.userIdabc }}</p>

    <button @click="btnClick">通过控制台观察1router和1route</button>
  </div>
</template>

<script>
export default {
  name: "User",
  computed: {
    // 计算属性
    userId() {
      return this.$route.params.userIdabc; // 处于活跃的路由对象，此处params.userIdabc中的userIdabc为src/router/index.js中定义的路由对象中的path
    },
  },
  methods: {
    btnClick() {
      // 所有的组件都继承自Vue的原型
      console.log(this.$router)
      console.log(this.$route)

      this.test() // 调用main.js中给Vue原型增加的test()函数
      console.log(this.name)
    },
  },
};
</script>

<style>
</style>